<script setup>
import 'swiper/scss';
import { getData } from '@/api'
import { ref, watch , computed, reactive, onMounted} from 'vue'
import filmShowTime from './filmShowTime/filmShowTime.vue'
import { useRoute , useRouter , RouterLink , RouterView} from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue';


const route = useRoute()
const router = useRouter()
// 影院信息
const cinemaInfo = ref({})
// 播放的电影列表
const filmList = ref([])
// 当前查看电影的下标
const activeIndex = ref(0)
// 电影播放的日期列表
const dateShow = ref([])
// 日期高亮
const showIndex = ref(0)

// 电影院详情
getData(route.params,'cinema.info').then(res=>{
  cinemaInfo.value = res.data.data.cinema
})
// 电影列表
getData(route.params,'film.cinema-show-film').then( res=>{
  filmList.value = res.data.data.films
  dealTheshowDate()
})
// 轮播图滑动事件
const slideChange = (swiper) => {
  console.log(swiper)
  activeIndex.value = swiper.activeIndex
}
// 轮播图带点击事件
const click = (swiper) => {
  swiper.slideTo(swiper.clickedIndex,500)
  activeIndex.value = swiper.clickedIndex
}
// 路由回溯
const back = () => {
  router.back()
}
// 将监听的放映日期数组处理
const dealTheshowDate= () => {
  dateShow.value = []
  filmList.value[activeIndex.value].showDate.forEach( item => {
    dateShow.value.push(new Date(item * 1000).toLocaleDateString('zh-CN',{
      month:'narrow',
      day:'numeric',
    }))
  })
}
// 监听查看电影的下标，处理其放映日期
watch( activeIndex , () =>{
  dealTheshowDate()
})
const app = ref(null)
onMounted(()=>{
  console.log(app)
  app.value.addEventListener('scroll',(e)=>{
    if(e.target.scrollTop >= 44){
    }
    console.log( e.target.scrollTop)
  })
})
</script>

<template>
  <div class="app" ref="app">
    <header>
    <span @click="back">&lt;</span>
    </header>
    <div class="title">
      {{ cinemaInfo.name }}
    </div>
    <main>
    <div class="cinema_name"><span v-for="item in cinemaInfo.services">{{ item.name }}</span></div>
    <div class="cinema_address">
      <img src="">
      <span>{{ cinemaInfo.address }}</span>
      <img src="">
    </div>
    <div class="film_list" ref="banners">
      <div class="swiper_bc">
        <img :src="filmList[activeIndex]?.poster" alt="">
      </div>
      <Swiper
        class="swiper"
        :slidesPerView="4"
        :spaceBetween="20"
        :centeredSlides="true"
      @slide-change="slideChange"
      @click="click">
        <SwiperSlide
          v-for="(item, i) in filmList"
          :key="item.filmId"
        class="swiper_slide">
          <img :src="item?.poster"
          :class="{ 'active': activeIndex === i }">
        </SwiperSlide>
      </Swiper>
      <p></p>
    </div>
    </main>
     <div class="film_about" @click="router.push({ name:'filmdetails', params: { filmId :filmList[activeIndex].filmId}})">
      <h3>{{filmList[activeIndex]?.name}}<span>{{ filmList[activeIndex]?.grade }}分</span></h3>
      <p>{{filmList[activeIndex]?.category}}<span>|</span>{{ filmList[activeIndex]?.runtime }}分钟<span>|</span><span v-for="item in filmList[activeIndex]?.actors">{{ item.name }}&nbsp;|</span></p>
      <i>&gt;</i>
    </div>
    <div class="film_showDate">
      <a v-for="(item , index) in dateShow"
      @click="showIndex=index"
      :class="{'nowtimeActive':showIndex === index}">
        {{ index===0? '今天'+item : item }}
      </a>
    </div>
    <footer>
    <filmShowTime 
    :filmId="filmList[activeIndex]?.filmId"
    :date="filmList[activeIndex]?.showDate[showIndex]"
    :cinemaId="cinemaInfo.cinemaId"/>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.app{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
header{
  z-index: 3;
  height:.44rem ;
  span{
  position: fixed;
  display: block;
  font-size: 0.24rem;
  transform: scale(0.8, 1.4);
  z-index: 2;
  height: 0.2142857143rem;
  line-height: 0.18rem;
  text-align: left;
  padding-left: 0.08rem;
  top: 0.12rem;
  color: #666;
  }
}
.title{
  height: .44rem;
    font: normal 500 .17rem/.44rem '';
    text-align: center;
    color: #191a1b;
    position: sticky;
    top: 0;
    z-index: 9;
    background-color: white;
}
main{
  .cinema_name{
    display: flex;
    justify-content: center;
    font-size: .09rem;
    color: #ffb232;
    span{
      padding:0 .05rem;
      border: .005rem solid #ffb232;
      margin: .05rem 0 .15rem .05rem;
    }
  }
  .cinema_address{
    display: flex;
    height: .5rem;
    justify-content: center;
    align-items: center;
    span{
      display: block;
      width: 2.53rem;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      overflow: hidden;
      margin: 0 .12rem;
      font-size: .14rem;
    }
    img{
      width: .14rem;
      height: .21rem;
    }
    & img:last-child{
      width: .17rem;
      height: .18rem;
    }
  }
  .film_list{
    width: 100%;
    padding: .15rem 0;
    height: 1.6rem;
    position: relative;
    overflow: hidden;
    &::-webkit-scrollbar{
      height: 0;
    }
    .swiper_bc{
      width: 100%;
      height: 1.6rem;
      position: absolute;
      padding: .15rem 0;
      img{
        height: 100%;
        width: 100%;
        filter: blur(30px);
      }
    }
    .swiper {
      margin-top: -.3rem;
      height: 160px;
      z-index: 3;
      img {
        width: 72px;
        height: 1.04rem;
        transition: .3s linear;
        user-select: none;
      }
      .swiper_slide {
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .active {
        width: 90px;
        height: 130px;
      }
    }
    p{
      width: .2rem;
      height: .2rem;
      position: absolute;
      bottom: 0;
      left: 54%;
      background-color: white;
      transform: rotate(45deg) translate(-47%,.28rem);
    }
  }
}
.film_about{
    height: .8rem;
    padding: .15rem 0;
    position: relative;
    position: sticky;
    top: .44rem;
    background-color: white;
    border-bottom: 1px solid rgba(150,150,150,.1);
    h3{
      font-size: 15px;
      color: #191a1b;
      text-align: center;
      span{
        font-size: 16px;
        font-style: italic;
        padding-left: .05rem;
        color: #ffb232;
      }
    }
    p{
        width: 100%;
        padding: 0 .45rem;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        overflow: hidden;
        color: #797d82;
        font-size: 13px;
        span{
          padding: 0 .03rem;
        }
    }
    i{
      display: block;
      width: .1rem;
      position: absolute;
      top: .3rem;
      right: .1rem;
      transform: scale(.6,1.2);
    }
    p,h3,i{
      user-select: none;
    }
}
.film_showDate{
    min-width: 100%;
    height:.49rem;
    display: flex;
    align-items: center;
    overflow: scroll;
    position: sticky;
    top: 1.24rem;
    background-color: white;
    &::-webkit-scrollbar{
      display: none;
    }
    a{
      border-bottom: 1px solid transparent;
      text-wrap: nowrap;
      font-size: .14rem;
      margin: 0 .15rem;
      line-height: .47rem;
      color: #191a1b;
    }
    .nowtimeActive{
      color: red;
      border-color: red;
    }
}
footer{
  min-height: 200px;
  width: 100%;
}
</style>
